<template>
	<view class="account-list-content" :data-theme="themeStyle">
		<view class="edit-item">
			<text class="tit">{{ $lang('name') }}</text>
			<input class="desc uni-input" type="text" maxlength="30" placeholder="请输入真实姓名" name="name" v-model="formData.realname" />
		</view>
		<view class="edit-item">
			<text class="tit">{{ $lang('mobilePhone') }}</text>
			<input class="desc uni-input" type="number" maxlength="11" placeholder="请输入手机号" v-model="formData.mobile" />
		</view>
		<view class="edit-item">
			<text class="tit">{{ $lang('accountType') }}</text>
			<picker @change="bindPickerChange" :value="index" :range="payList" class="picker">
				<text class="desc uni-input">{{ payList[index] }}</text>
				<text class="iconfont iconright"></text>
			</picker>
		</view>
		<view class="edit-item" v-if="formData.withdraw_type == 'bank'">
			<text class="tit">银行名称</text>
			<input class="desc uni-input" type="text" maxlength="50" placeholder="请输入银行名称" v-model="formData.branch_bank_name" />
		</view>
		<view class="edit-item" v-if="formData.withdraw_type != 'wechatpay'">
			<text class="tit">提现账号</text>
			<input class="desc uni-input" type="text" maxlength="30" placeholder="请输入提现账号" v-model="formData.bank_account" />
		</view>
		<button class="add" type="primary" @click="saveAccount">保存</button>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
import validate from 'common/js/validate.js';
import globalConfig from '@/common/js/golbalConfig.js'
import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue'
export default {
	data() {
		return {
			formData: {
				realname: '',
				mobile: '',
				withdraw_type: '',
				bank_account: '',
				branch_bank_name: ''
			},
			payList: [],
			index: 0,
			flag: false,
			transferType: []
		};
	},
	components: {
		nsShowToast
	},
	onLoad(option) {
		if (option.id) {
			this.formData.id = option.id;
		}
	},
	mixins: [globalConfig],
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh();
		this.getTransferType();
		if (this.formData.id) this.getAccountDetail(this.formData.id);
	},
	methods: {
		getAccountDetail(id) {
			this.$api.sendRequest({
				url: '/api/memberbankaccount/info',
				data: { id: this.formData.id },
				success: res => {
					if (res.code == 0 && res.data) {
						this.formData.realname = res.data.realname;
						this.formData.mobile = res.data.mobile;
						this.formData.bank_account = res.data.bank_account;
						this.formData.branch_bank_name = res.data.branch_bank_name;
						this.formData.withdraw_type = res.data.withdraw_type;
						// this.index = this.formData.withdraw_type == 'bank' ? '0' : '1';
						if(this.formData.withdraw_type == 'bank'){
							this.index = 2
						}else if(this.formData.withdraw_type == 'wechatpay'){
							this.index = 0
						}else if(this.formData.withdraw_type == 'alipay'){
							this.index = 1
						}
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		/**
		 * 获取转账方式
		 */
		getTransferType() {
			this.payList=[];
			this.$api.sendRequest({
				url: '/api/memberwithdraw/transferType',
				success: res => {
					if (res.code >= 0 && res.data) {
						this.transferType = res.data;
						for (let v in this.transferType) {
							
							if(!this.formData.withdraw_type && v == 'wechatpay'){
								this.formData.withdraw_type=v;
							}
							this.payList.push(this.transferType[v]);
						}
						this.payList.reverse()
						if (!this.formData.id && this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				}
			});
		},
		bindPickerChange(e) {
			this.index = e.detail.value;
			let value = '';
			for (let i in this.transferType) {
				if (this.transferType[i] == this.payList[this.index]) {
					value = i;
				}
			}
			this.formData.withdraw_type = value;
		},
		vertify() {
			var rule = [
				{ name: 'realname', checkType: 'required', errorMsg: '请输入姓名' },
				{ name: 'mobile', checkType: 'required', errorMsg: '请输入手机号' },
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }
			];
			if (this.formData.withdraw_type == 'bank') {
				rule.push({ name: 'branch_bank_name', checkType: 'required', errorMsg: '请输入银行名称' });
			}
			if (this.formData.withdraw_type != 'wechatpay') {
				rule.push({ name: 'bank_account', checkType: 'required', errorMsg: '请输入提现账号' });
			}

			var checkRes = validate.check(this.formData, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({ title: validate.error });
				this.flag = false;
				return false;
			}
		},
		saveAccount() {
			if (this.flag) return;
			this.flag = true;
			if (this.vertify()) {
				let url = !this.formData.id ? 'add' : 'edit';
				let data = {};
				this.$api.sendRequest({
					url: '/api/memberbankaccount/' + url,
					data: {
						id: this.formData.id,
						realname: this.formData.realname,
						mobile: this.formData.mobile,
						withdraw_type: this.formData.withdraw_type,
						bank_account: this.formData.bank_account,
						branch_bank_name: this.formData.branch_bank_name
					},
					success: res => {
						if(!this.formData.id) {
							this.$util.showToast({
								title: "添加成功"
							});
						}else {
							this.$util.showToast({
								title: "修改成功"
							});
						}
						
						if (res.code == 0) {
							uni.navigateBack({
								delta: 1
							});
						} else {
							this.flag = false;
						}
					},
					fail: res => {
						this.flag = false;
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
.account-list-content {
	.edit-item {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		height: 100rpx;
		background-color: #fff;
		.tit {
			width: 120rpx;
			font-size: $ns-font-size-base;
		}
		.desc {
			flex: 1;
			font-size: $ns-font-size-base;
			margin-left: 20rpx;
			padding: 0;
		}
		&:first-of-type {
			margin-top: $uni-spacing-row-base;
		}
		.picker {
			flex: 1;
			text {
				&:last-child {
					float: right;
				}
			}
		}
	}
}

.account-list-content > .edit-item + .edit-item {
	border-top: 2rpx solid $ns-border-color-gray;
}
.add {
	margin-top: 60rpx;
}
</style>
